import StarRatingComponent from 'react-star-rating-component';
import React from 'react';
import { Toast, Icon, Picker, Button, InputItem, List, DatePicker, Flex } from 'antd-mobile';
import { createForm } from 'rc-form';
import _ from 'lodash';
import styles from './ConsumeFeedback.less';

const TYPE_SALEMAN = 'salemanScore';
const TYPE_BRANCH = 'branchScore';
const TYPE_PRODUCT = 'productScore';

class ConsumeFeedback extends React.Component {
  constructor(props) {
    super(props);
    const data = {};
    data[TYPE_SALEMAN] = 0;
    data[TYPE_PRODUCT] = 0;
    data[TYPE_BRANCH] = 0;
    if (this.props.location.query.shopId) {
      data.shopId = this.props.location.query.shopId;
    }
    if (this.props.location.query.flow_no) {
      data.flow_no = this.props.location.query.flow_no;
    }
    this.state = data;
  }

  submit = () => {
    Toast.success('感谢您的评价，即将返回会员卡页面!', 3);
    setTimeout(() => {
      this.props.onSubmit(this.state);
      Toast.hide();
    }, 1200);
  };

  onRatingChange = (type, rating) => {
    const data = {};
    data[type] = rating;
    this.setState(data);
  };

  render() {
    return (<div className="consumeFeedback">
      <ul style={{ padding: '0.18rem 0.3rem', listStyle: 'none' }}>
        <li className={styles.titleRow}>
        <span className={styles["bigTitle"]}>服务评价：</span><span className={styles.title}>您的意见对我们很重要哦！</span>
        </li>

        <li className={styles.row}>
          <Flex>
            <Flex.Item className={styles.head}>导购服务</Flex.Item>
            <Flex.Item className={styles.star}>
              <StarRatingComponent
                name="saleman"
                starCount={5}
                value={this.state[TYPE_SALEMAN]}
                onStarClick={(val) => {
                  this.onRatingChange(TYPE_SALEMAN, val);
                }}
                emptyStarColor={"#f2f2f2"}
                starColor={"#ff9c3b"}
              />
            </Flex.Item>
          </Flex>
        </li>
        <li className={styles.row}>
          <Flex>
            <Flex.Item className={styles.head}>商品质量</Flex.Item>
            <Flex.Item className={styles.star}>
              <StarRatingComponent
                name="product"
                starCount={5}
                value={this.state[TYPE_PRODUCT]}
                onStarClick={(val) => {
                  this.onRatingChange(TYPE_PRODUCT, val);
                }}
                emptyStarColor={"#f2f2f2"}
                starColor={"#ff9c3b"}
              />
            </Flex.Item>
          </Flex>
        </li>
        <li className={styles.row}>
          <Flex>
            <Flex.Item className={styles.head}>门店环境</Flex.Item>
            <Flex.Item className={styles.star}>
              <StarRatingComponent
                name="branch"
                starCount={5}
                value={this.state[TYPE_BRANCH]}
                onStarClick={(val) => {
                  this.onRatingChange(TYPE_BRANCH, val);
                }}
                emptyStarColor={"#f2f2f2"}
                starColor={"#ff9c3b"}
              />
            </Flex.Item>
          </Flex>
        </li>
        <li style={{ marginTop: '1rem' }}>
          <Button type="primary" onClick={() => this.submit()}>提交评价</Button>
        </li>
      </ul>
    </div>);
  }
}

ConsumeFeedback.propTypes = {
  onSubmit: React.PropTypes.func,
  location: React.PropTypes.object,
};

ConsumeFeedback.defaultProps = {
};

export default createForm()(ConsumeFeedback);
